<template>
    <div>


        <div class=" app_width">

            <el-table stripe border fit highlight-current-row
                      :key='tableKey'
                      :data="listData"
                      v-loading="listLoading"
                      element-loading-text="正在加载..."
                      style="width: 100%"
            >


                <el-table-column align="left" header-align="center" label="商品名称" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.goodsinfoname }}
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" label="单价" width="120">
                    <template #default="scope">

                        {{ scope.row.ordersprice }}

                    </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" label="数量" width="120">
                    <template #default="scope">

                        {{ scope.row.goodsnumber }}

                    </template>
                </el-table-column>
                <el-table-column align="center" width="120">
                    <template #default="scope">
                        <router-link :to="'/goodsinfoDetail?id='+scope.row.goodsinfoid" target="_blank">
                            <span style="font-size: 12px"> 商品详情 </span>
                        </router-link>
                    </template>
                </el-table-column>


            </el-table>

        </div>


    </div>

</template>
<script name="ordersitem" setup>

import {onMounted, ref, watch} from "vue";

const postFormRef = ref(null) // 如果页面有表单,则使用此ref
const route = useRoute();   //获取路由中的信息或参数
const router = useRouter();   //操作路由,跳转之类的
import {ElMessage, ElMessageBox} from "element-plus";  //提示框和消息


import axios_request from '../../util/axios_request.js'

import {useRoute, useRouter} from "vue-router";


const props = defineProps({         //数据ID,只在这个组件中使用
    dataId: {
        type: Number,
        default: 0
    },

    //0商品明细
    viewISevaluate: {
        type: Number,
        default: 0
    },
    //隐藏与显示,用于监控和初始,只在这个组件中使用
    dialogFormVisible: {
        type: Boolean,
        default: false
    },

})
const tableKey = ref(0)//表格key

const listData = ref(null)//列表数据
const listLoading = ref(false)//加载提示
const listQuery = ref({})


watch(() => route, newdata => {
    // 如果路由参数有变化，会再次执行获取列表数据
    getList()

}, {deep: true})

watch(() => props.dataId, newdata => {
    // 如果参数有变化，会再次执行获取列表数据
    getList()

}, {deep: true})


onMounted(() => {
    getList()

})


//关闭弹窗
const emits = defineEmits(['emits'])

function closeDialog() {
    //关闭的时候 不能恢复数据,如果恢复的话,会引起子组件,传递给父组件行数据出错
    emits('close') //事件通知父组件修改el-model的显示状态
}

function getList() {

    listLoading.value = true
    listQuery.value.ordersid = props.dataId

    axios_request.get('/web/ordersitem.action', {params: listQuery.value}).then(response => {
        listData.value = response.data

        listLoading.value = false
    })
}


//当前页输入框
function handleCurrentChange(val) {

    listQuery.value.pageNumber = val
    getList()
}


</script>


